<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>HTML5表单元素</title>
		<style type="text/css">
		*{
			margin:0;
			padding:0;
			font-size:12px;
		}
		body,legend,p{
			padding:10px;
		}
		legend{
			margin-left:10px;
		}
		p{
			border-top:1px dotted #ccc;
		}
		label{
			width:70px;
			display:inline-block;
		}
		video{
			margin:10px 20px 10px 0;
			padding:3px;
			border:1px solid #ccc;
			background-color:#fff;
			float:left;
		}
		.error{
			background-color:#cf050b;
			color:#fff;
			padding:5px 10px;
			margin:10px 0;
		}
		#playcontrol{
			margin:10px 0 0 10px;
			list-style:none;
		}
		#playcontrol li{
			margin-bottom:10px;
		}
		</style>
	</head>
	<body>
		<form name="frm1" action="" method="get">
			<fieldset style="width:45%;float:left;margin-right:20px;">
				<legend>HTML5表单元素</legend>
				<p>
					<label for="">文本框：</label><input type="text" value="" />
				</p>
				<p>
					<label for="">数字：</label><input type="number" value="" />
				</p>
				<p>
					<label for="">电子邮件：</label><input type="email" value="" />
				</p>
				<p>
					<label for="">网络地址：</label><input type="url" value="" />
				</p>
				<p>
					<label for="">时间：</label><input type="date" value="" />
				</p>
				<p>
					<label for="">滑块：</label><input type="range" value="" />
				</p> 
				<p>
					<label for="">搜索：</label><input type="search" value="" />
				</p>
				<p>
					<input type="submit" value="提交" />
				</p>
			</fieldset>
		</form>
		<img src="images/html5-input.JPG" width="609" height="211" alt="html5 表单类型支持" style="margin:20px 0 0 0;" />
		<br style="clear:both;" />
		<video id="mainvideo" autoplay="false" controls="controls" src="video/big_buck_bunny_480p_stereo.ogg">
			<span class="error">您的浏览器不支持 video 标签。</span>
		</video>
		<ul id="playcontrol">
			<li><input type="button" value="播放/暂停" onclick="aa()" /></li>
		</ul>
		<br style="clear:both;"/>
		<img src="images/video.jpg" />
		<!-- 脚本控制 -->
		<script type="text/javascript">
		var videostatus = 0;//默认设置 0 为播放状态，1 暂停状态 。
		var objVideo = document.getElementById("mainvideo");
		function aa(){
			if(videostatus==0){
				videostatus = 1;
				objVideo.pause();
			}else{
				videostatus = 0;
				objVideo.play();
			}
		}
		</script>
	</body>
</html>
